Google Maps in Blogger: Advanced Subjects

This is part of my tutorial on how to use Google Maps into Google's Blogger service. This section teaches advanced techniques and debugging tips.

Blogger's Big Gotcha!
What makes Google Maps so difficult to install into a blog from Blogger is the fact that all line feeds in a post are converted to <br /> tags. So when you insert the required Javascript into your blog posting, <br /> tags are inserted in there. That causes the Javascript interpreter to fail in the user's browser.

The solution is to make sure that there are no line feeds in any javascript in your blog post. Everything between the <script> and the </script> tags must be one long line.

Common Problems
The most common problem I have encountered are Javascript errors.

Some are introduced by a <br /> getting slipped into the logic from a linefeed. If your map is not showing up, then view the source code that is presented to your browser. Look closely at the Javascript from your post. See if there were any changes introduced from what you thought you had coded.

Another common problem is the dropping of the semi-colon after a Javascript statement. In the Embed method tutorial I document how to change map attributes by updating variables. Look closely and you will see that each variable assignment statement is terminate with a semicolon. If you accidently removed a semicolon, it will cause the javascript interpreter to fail in the user's browser.

Another problem that might bite you is switching longitude and latitude. It is easy to forget and getting them backwards. It is a good idea to know roughly what the latitude and longitude of your target so you will recognize them at a glance.

A Helpful Tool
A good text editor will help you prepare your code for Google Blogger. It will make it easy to strip out the line feeds to prevent Blogger from inserting statements. I use EditPadLite. After I write the HTML version of the post, I use the editor's find and replace to remove all of the line feeds. With one command, it converts the post to one long line of HTML.

The International Date Line:
I've discovered a problem, or bug, with Google Maps that impacts my brother's blog. The polyline showing the voyage path can not cross the International Date Line from east to west. Instead, it joins the point on the west side of the line by going east across the planet.

To get around this problem for now, I've broke the line into to parts, one on each side of the line. So there is a tiny gap across the line now. I will work on seeing if I can get a better solution to this problem.

Putting the map in the blog's info column
You don't have to put a map in a post. You can also stick it in a side column so that it always shows up. To do this, you have to take all the code you inserted into the blog post and instead insert into the appropriate place in your blog's template.

You should also reduce the map size from 400 down to 200 or so pixels, since the info column tends to be narrower.

In your blog's template, the area where the info column contents are defined is pretty easy to find.

Multiple Maps
I've created a chapter to demonstrate how to implement multiple maps into Blogger.

Internet Explorer Quirks
Internet Explorer seems to have more "problems" with the Maps-API than Firefox does. I put problems in quotes because it may not be a problem as much as a stricter interpretation of the rules. The above technique is designed to get around these limitations.

In the stuff you added to the template was a specification for VML. This is needed to support the GPolyLine object in IE. The need for this is buried in the API documention.